<template>
  <div class="container">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>专户列表</el-breadcrumb-item>
    </el-breadcrumb>-->
    <!-- <el-row>
      <el-col class="topTitle">专户列表</el-col>
    </el-row>-->
    <!--    <topTitle :titleText="titleText"></topTitle>-->
    <div>
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item
            label="区域"
            class="row-padding-bottom"
            v-show="!loginQy"
          >
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            label="行业"
            class="row-padding-bottom"
            v-show="!loginQy"
          >
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in industryOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入项目名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="专户账号" class="row-padding-bottom">
            <el-input
              v-model="filterField.account"
              placeholder="请输入专户账号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="开户银行" class="row-padding-bottom">
            <el-select
              v-model="filterField.bankId"
              filterable
              placeholder="请选择开户银行"
              clearable
            >
              <el-option
                v-for="item in bankOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="是否代发" class="row-padding-bottom">-->
          <!--            <el-select placeholder="请选择" clearable>-->
          <!--              <el-option label="是" value="1"></el-option>-->
          <!--              <el-option label="否" value="0"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item class="fr" v-show="loginQy">
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icontianjia"
              @click="toAdd"
              v-show="isShowAdd"
            >
              <span class="opetareText">添加专户</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          prop="projectName"
          label="项目名称"
          :formatter="formatTd"
          min-width="30%"
        ></el-table-column>
        <el-table-column
          prop="bankName"
          label="开户银行"
          align="center"
          :formatter="formatTd"
          min-width="14%"
        ></el-table-column>
        <el-table-column
          label="专户账号"
          align="center"
          :formatter="formatTd"
          min-width="14%"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.account">{{
              scope.row.account.replace(
                /^([\s\S]{3})[\s\S]*?([\s\S]{3})$/,
                '$1**** ****$2'
              )
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="balance"
          label="余额(万元)"
          align="center"
          :formatter="dateForma"
          min-width="14%"
        ></el-table-column>
        <el-table-column
          prop="expensesTotal"
          label="支出(万元)"
          align="center"
          :formatter="dateForma"
          min-width="14%"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="left"
          :formatter="formatTd"
          min-width="14%"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-show="isShowDetail"
              @click="toDetail(scope.$index, scope.row)"
              >查看流水</el-link
            >
            <el-link
              type="primary"
              v-show="loginQy && isShowUpdate"
              @click="toEdit(scope.$index, scope.row)"
              >修改</el-link
            >
            <span v-show="!isShowDetail && !isShowUpdate && !loginQy">--</span>
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关专户数据"></emptyTable>
        </div>
      </el-table>
      <!-- filterField为搜索条件 -->
      <!-- getTableList为获取子组件的数据 -->
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
    <!--专户流水-->
    <el-dialog
      title="专户流水"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      :modal-append-to-body="false"
    >
      <el-row style="margin-top: 0px; margin-bottom: 10px">
        <el-col :span="8" style="line-height: 40px">
          专户账号：{{
            isDisplay
              ? this.specialAccount.replace(
                  /^([\s\S]{3})[\s\S]*?([\s\S]{3})$/,
                  '$1**** ****$2'
                )
              : this.specialAccount
          }}
          <el-button
            type="primary"
            style="
              padding: 2px;
              width: 40px;
              background: #009588;
              border: 1px solid #009588;
            "
            @click="doDisplay"
            >{{ isDisplay ? '显示' : '隐藏' }}</el-button
          >
        </el-col>
        <!-- <el-col :span="2" style="line-height: 40px;"></el-col> -->
        <el-col :span="14" style="text-align: right">
          <el-form :inline="true" :model="lsfilterField" ref="searchConditions">
            <el-form-item
              label="时间"
              class="row-padding-bottom"
              style="margin-bottom: 0px"
            >
              <el-date-picker
                v-model="lsfilterField.createDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-bottom: 0px">
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                class="commonBtn"
                @click="searchLsList"
                size="small"
              ></el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="tableLsList"
          v-loading="lsLoading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="createTime"
            label="时间"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="total"
            label="金额"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="typeDesc"
            label="类型"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isLsShow">
            <emptyTable emptyText="暂无相关专户数据"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="paginationLs"
          @getList="getTableLsList"
          :filterField="lsfilterField"
          :requestUrl="requestLsUrl"
        ></Pagination>
      </el-row>
    </el-dialog>
    <el-dialog
      :title="eventType === 'add' ? '添加专户' : '修改工资专户信息'"
      :visible.sync="accountFormVisible"
      :close-on-click-modal="false"
      @close="cancelAccountDialog('accountForm')"
      width="716px"
      custom-class="brand-dialog-min-width accountDialog"
      :modal-append-to-body="false"
    >
      <el-form :model="accountForm" :rules="formRules" ref="accountForm">
        <el-form-item label="项目名称" prop="projectId" label-width="135px">
          <el-select
            v-model="accountForm.projectId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
            :disabled="eventType !== 'add'"
          >
            <el-option
              v-for="(item, index) of projectListOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户银行" prop="bankId" label-width="135px">
          <el-select
            v-model="accountForm.bankId"
            placeholder="请选择"
            class="optionWidth"
            clearable
            filterable
            :disabled="accountForm.projectTotal > 0"
            @change="changeBankId"
          >
            <el-option
              v-for="(item, index) of bankOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行网点" prop="bankSiteId" label-width="135px">
          <el-select
            v-model="accountForm.bankSiteId"
            class="optionWidth"
            :placeholder="
              accountForm.bankId != '' ? '请选择' : '请先选择开户银行'
            "
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) of bankBranchOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专户账号" prop="account" label-width="135px">
          <el-input
            maxlength="64"
            v-model="accountForm.account"
            autocomplete="off"
            placeholder="请输入"
            class="inputWidth"
            @blur="accountForm.account = changeValue($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="专户开户凭证" label-width="135px">
          <div class="uploadBox">
            <el-button round class="uploadImg">上传</el-button>
            <span class="uploadImgState"
              >仅支持png，jpg，jpeg格式的图片，大小2MB</span
            >
            <div class="upLoadDom">
              <form id="salaryExcelForm">
                <input
                  type="file"
                  id="salaryExcel"
                  name="file"
                  @change="fileChange('1')"
                />
              </form>
            </div>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <elementImage
              :upLoadFile="accountForm.uploadFile"
              :srcList="accountForm.srcList"
              :oldSrcList="accountForm.oldSrcList"
              @changeSrcList="changeSrcList"
            ></elementImage>
          </el-col>
        </el-row>
        <el-form-item
          label="农民工工资委托发放三方协议"
          label-width="135px"
          class="agreementBox"
        >
          <div class="uploadBox">
            <el-button round class="uploadImg">上传</el-button>
            <span class="uploadImgState"
              >仅支持png，jpg，jpeg格式的图片，大小2MB</span
            >
            <div class="upLoadDom">
              <form id="ExcelAgreement">
                <input
                  type="file"
                  id="salaryExcelAgr"
                  name="file"
                  @change="fileChange('2')"
                />
              </form>
            </div>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <elementImage
              :upLoadFile="accountForm.upLoadAgreementFile"
              :srcList="accountForm.agrSrcList"
              :oldSrcList="accountForm.oldAgrSrcList"
              @changeSrcList="changeSrcListArg"
            ></elementImage>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click.native="cancelAccountDialog('accountForm')"
          class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveBankInfo('accountForm')"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'specialAccountList',
  components: {},
  data() {
    return {
      titleText: '专户列表',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      //表格数据
      tableList: [],
      tableLsList: [],
      requestUrl: 'api-acc/account/expand/accountpage',
      requestLsUrl: 'api-acc/accass/expand/list',
      date: [],
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        account: '', //专户账号
        areaId: '', //区域
        industryId: '', //行业
        bankId: '',
      },
      lsfilterField: {
        createDate: '',
        projectId: '',
        account: '',
      },
      isShow: false, //列表加载
      isLsShow: false, //列表加载
      loading: true,
      lsLoading: true,
      dialogVisible: false,
      specialAccount: '', //专户账号
      projectId: '',
      isDisplay: true, //是否隐藏
      userType: '', //用户类型
      areaId: '', //区域
      bankOptions: [],
      bankBranchOptions: [], //网点列表
      loginQy: '', //当前登录用户是否是企业
      accountFormVisible: false,
      // 补充专户信息
      accountForm: {
        projectId: '',
        accountId: '',
        bankId: '',
        bankSiteId: '', //银行网点id
        account: '',
        uploadFile: [], //
        srcList: [],
        oldSrcList: [],
        upLoadAgreementFile: [], //三方协议
        agrSrcList: [],
        oldAgrSrcList: [],
      },
      // bankData: [],
      eventType: '',
      formRules: {
        projectId: [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'change',
          },
        ],
        bankId: [
          {
            required: true,
            message: '银行不能为空',
            trigger: 'change',
          },
        ],
        bankSiteId: [
          {
            required: true,
            message: '银行网点不能为空',
            trigger: 'change',
          },
        ],
        account: [
          {
            required: true,
            // pattern: /^([1-9]{1})(\d{11,18})((-)(\d{1,9}))*$/,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
      },
      canLogin: false, //专户保存按钮loading
      projectListOptions: [],
      isShowUpdate: '',
      isShowAdd: '',
      isShowDetail: '',
    }
  },
  computed: {
    ...mapState(['areasOptions', 'industryOptions']),
  },
  created() {
    this.$store.state.activeMenu =
      '/home/separateAccountManagement/specialAccount'
    this.getBank()
    this.userType = localStorage.getItem('loginType')
    //建筑端企业端项目详情-专户管理跳转专户列表
    this.filterField.projectName = this.$route.query.projectName
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    // 企业用户不显示区域和行业

    if (
      localStorage.getItem('loginType') === 'QY' ||
      localStorage.getItem('loginType') === 'XM'
    ) {
      this.loginQy = true
    } else {
      //获取区域
      this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
      //获取行业
      this.getIndustry({})
    }
    // console.log(this.$store.state.buttonLimitsArr);

    this.getProjectList()
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('allocationPlanList:detail') >
      -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('allocationPlanList:update') >
      -1
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('allocationPlanList:add') > -1
  },
  methods: {
    /**
     * @name: 监听银行的Id
     * @param {type}
     * @Author: 471826078@qq.com
     */
    ...mapActions(['areasOptions', 'industryOptions']),
    changeBankId(val) {
      this.accountForm.bankSiteId = ''
      if (!val) {
        this.bankBranchOptions = []
      } else {
        this.getBankBranchList(val)
      }
    },
    /**
     * @name: 获取银行网点列表
     * @param {String}  bankId
     * @Author: 471826078@qq.com
     */
    getBankBranchList(bankId) {
      this.axios
        .post('api-acc/accountbank/expand/banksite', { bankId })
        .then((res) => {
          this.bankBranchOptions = res.data.result
          if (res.data.result.length === 0) {
            this.$message({
              message: '请联系银行管理员进行网点信息维护',
              type: 'warning',
            })
          }
        })
        .catch((error) => {
          this.$message({
            message: '获取网点数据失败',
            type: 'error',
          })
        })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    getTableLsList(data) {
      this.tableLsList = data
      this.lsLoading = false
      if (this.tableLsList.length < 1) {
        this.isLsShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    searchLsList() {
      this.$refs.paginationLs.getTableListData()
    },
    handleClose(done) {
      this.dialogVisible = false
    },
    toDetail(index, row) {
      if (this.userType == 'QY' || this.userType == 'XM') {
        this.$router.push({
          path: '/home/specialAccount/companyAccountDetail',
          name: 'companyAccountDetail',
          query: {
            projectId: row.projectId,
            path: 'specialAccount',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/separateAccountManagement/specialAccount',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.specialAccount = row.account
        this.projectId = row.projectId
        this.lsfilterField.projectId = row.projectId
        this.lsfilterField.account = row.account
        this.lsfilterField.createDate = row.createTime
        this.isDisplay = true
        this.dialogVisible = true
        this.$nextTick(function () {
          this.$refs.paginationLs.getTableListData()
        })
      }
    },
    doDisplay() {
      //   this.specialAccount="123456789000000000000000"
      this.isDisplay = !this.isDisplay
      // console.log("dddd="+this.specialAccount.replace(/(\d{3})\d{5}(\d{3})/,"$1****$2"));
    },
    dateForma(row, column) {
      const daterc = row[column.property]
      if (daterc || daterc == '0') {
        let lately2 = (daterc / 10000).toFixed(3) //对小数点后3位四舍五入
        return lately2.substring(0, lately2.lastIndexOf('.') + 3)
      } else {
        return '--'
      }
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getBank() {
      var data = {
        type: 'BANK_TYPE',
      }
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: data,
      })
        .then((response) => {
          this.bankOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    getProjectList() {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
      })
        .then((response) => {
          this.projectListOptions = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    // 添加专户
    toAdd() {
      this.eventType = 'add'
      this.accountFormVisible = true
    },
    //专户图片上传
    fileChange(type) {
      var Filedata
      var file
      var fileSize
      if (type == '1') {
        Filedata = $('#salaryExcel').val()
      } else {
        Filedata = $('#salaryExcelAgr').val()
      }
      if (!Filedata) {
        return
      }
      try {
        if (type == '1') {
          file = $('#salaryExcel')[0].files[0]
        } else {
          file = $('#salaryExcelAgr')[0].files[0]
        }
        fileSize = (file.size / 1024).toFixed(0)
      } catch (e) {
        this.$message({
          message:
            '您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过5M，建议使用FireFox、Chrome或IE10以上浏览器。',
          type: 'warning',
        })
      }
      // 文件大小和限制类型可以通过子组件传值区分，若不适应于使用页面，可自行判断
      if (type == '1') {
        if (this.accountForm.uploadFile.length == 20) {
          this.$message({
            message: '最多上传20个附件',
            type: 'warning',
          })
          $('#salaryExcel').val('')
          return
        }
      } else {
        if (this.accountForm.upLoadAgreementFile.length == 20) {
          this.$message({
            message: '最多上传20个附件',
            type: 'warning',
          })
          $('#salaryExcelAgr').val('')
          return
        }
      }
      if (fileSize / 1 > 1024 * 2) {
        this.$message({
          message: '最多能上传2M以内的图片',
          type: 'warning',
        })
        return
      }
      if (!/\.(png|jpg|jpeg|PNG|JPG|JPEG)$/.test(Filedata)) {
        this.$message({
          message: '仅支持上传png、jpg、jpeg格式文件',
          type: 'warning',
        })
        return
      }
      let that = this
      var options = {
        url: common.uploadUrl + 'api-f/files/upload',
        type: 'POST',
        dataType: 'json',
        success: function (data) {
          if (type == '1') {
            that.accountForm.uploadFile.push(data)
            that.accountForm.srcList.push(data.url)
            that.accountForm.oldSrcList.push(data.url)
            $('#salaryExcel').val('')
          } else {
            that.accountForm.upLoadAgreementFile.push(data)
            that.accountForm.agrSrcList.push(data.url)
            that.accountForm.oldAgrSrcList.push(data.url)
            $('#salaryExcelAgr').val('')
          }
        },
        error: function () {},
      }
      if (type == '1') {
        $('#salaryExcelForm').ajaxSubmit(options)
      } else {
        $('#ExcelAgreement').ajaxSubmit(options)
      }
      return false
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.accountForm.srcList = val
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcListArg(val) {
      this.accountForm.agrSrcList = val
    },
    //专户弹框取消
    cancelAccountDialog() {
      this.accountFormVisible = false
      this.accountForm.srcList = []
      this.accountForm.oldSrcList = []
      this.accountForm.uploadFile = []
      this.accountForm.upLoadAgreementFile = []
      this.accountForm.agrSrcList = []
      this.accountForm.oldAgrSrcList = []
      this.accountForm.projectId = ''
      this.$refs.accountForm.resetFields()
      // this.$nextTick(function(){
      //   this.accountFormVisible = false;
      //   this.$refs.accountForm.resetFields();
      // });
    },
    //修改专户
    toEdit(index, row) {
      this.eventType = 'update'
      this.accountFormVisible = true
      this.$nextTick(function () {
        this.getUpdateAccountInfo(row.projectId)
      })
    },
    //保存专户信息
    saveBankInfo() {
      //确定按钮禁止点击
      this.canLogin = true
      this.$refs['accountForm'].validate((valid) => {
        var url = ''
        if (valid) {
          if (this.eventType === 'add') {
            url = 'api-acc/account/expand/add'
          } else {
            url = 'api-acc/account/expand/update'
          }
          let data = {
            projectId: this.accountForm.projectId,
            id: this.accountForm.accountId,
            account: this.accountForm.account,
            bankSiteId: this.accountForm.bankSiteId, //新增银行网点地段
            bankId: this.accountForm.bankId,
            openCertificateFile: JSON.stringify(this.accountForm.uploadFile),
            agreementFile: JSON.stringify(this.accountForm.upLoadAgreementFile),
          }
          this.saveAccountAjax(url, data)
        } else {
          this.canLogin = false
          return false
        }
      })
    },
    //保存专户的ajax
    saveAccountAjax(url, data) {
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then(
          (res) => {
            this.canLogin = false
            if (!res.data.hasError) {
              this.$message({
                message: '保存成功',
                type: 'success',
              })
              this.accountFormVisible = false //关闭弹窗
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.canLogin = false
            this.$message({
              message: '保存失败111',
              type: 'error',
            })
          }
        )
        .catch((error) => {
          this.canLogin = false
          this.$message({
            message: '保存失败',
            type: 'error',
          })
        })
    },
    //获取修改专户的信息
    getUpdateAccountInfo(projectId) {
      this.axios({
        method: 'post',
        url: 'api-acc/account/expand/accountdetail',
        data: {
          projectId: projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.accountForm.projectId = projectId
              this.accountForm.bankId = parseInt(res.data.result.bankId) + ''
              this.getBankBranchList(this.accountForm.bankId)
              this.accountForm.accountId = res.data.result.id
              this.accountForm.account = res.data.result.account
              this.accountForm.bankSiteId = res.data.result.bankSiteId
                ? res.data.result.bankSiteId
                : ''
              if (res.data.result.openCertificateFiles.length > 0) {
                this.accountForm.uploadFile =
                  res.data.result.openCertificateFiles
                for (var i = 0; i < this.accountForm.uploadFile.length; i++) {
                  this.accountForm.srcList.push(
                    this.accountForm.uploadFile[i].url
                  )
                  this.accountForm.oldSrcList.push(
                    this.accountForm.uploadFile[i].url
                  )
                }
              }
              if (res.data.result.agreementFiles.length > 0) {
                this.accountForm.upLoadAgreementFile =
                  res.data.result.agreementFiles
                for (
                  var i = 0;
                  i < this.accountForm.upLoadAgreementFile.length;
                  i++
                ) {
                  this.accountForm.agrSrcList.push(
                    this.accountForm.upLoadAgreementFile[i].url
                  )
                  this.accountForm.oldAgrSrcList.push(
                    this.accountForm.upLoadAgreementFile[i].url
                  )
                }
              }
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              message: '获取专户信息失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
}

// 修改专户弹窗样式
.uploadBox {
  position: relative;
  .uploadImg {
    width: 96px;
    height: 40px;
    color: #009588;
    border: 1px solid #009588;
    cursor: pointer;
  }
  .upLoadDom {
    position: absolute;
    width: 96px;
    height: 40px;
    top: 0;
    left: 0;
    opacity: 0;
    line-height: 0px;
    form {
      input {
        width: 96px;
        height: 40px;
        line-height: 0px;
        cursor: pointer;
      }
    }
  }
}

.agreementBox {
  /deep/label {
    line-height: 20px;
  }
}
.imgStyle {
  margin-left: 135px;
  li {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    .iconjian {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
      cursor: pointer;
    }
    .el-image {
      cursor: pointer;
    }
  }
}
.optionWidth,
.inputWidth {
  width: 310px !important;
}
</style>
<style>
.el-dialog__footer {
  height: 66px;
  padding: 15px 20px;
}
.el-dialog__footer button {
  height: 36px !important;
}
</style>
